<template>
  <div class="search-box">
    <!-- 定位 -->
    <div class="location border-gray-bottom">
      <div class="city" @click="cityClick">{{ currentCity.cityName }}</div>
      <div class="position" @click="positionClick">
        <div class="text">我的位置</div>
        <van-icon name="aim" color="#ff5370" />
      </div>
    </div>
    <!-- 日期选择 -->
    <div class="date-range border-gray-bottom" @click="showCalendar = true">
      <div class="start">
        <span class="tip">入住</span>
        <span class="time">{{ startDate }}</span>
      </div>
      <div class="stay">共{{ countDay }}晚</div>
      <div class="end">
        <span class="tip">离店</span>
        <span class="time">{{ endDate }}</span>
      </div>
    </div>
    <van-calendar
      v-model:show="showCalendar"
      type="range"
      color="var(--color)"
      @confirm="onConfirm"
      :show-confirm="false"
    />
    <!-- 价格、人数、民宿名选填 -->
    <div class="desc-area border-gray-bottom">
      <span>价格不限</span>
      <span>人数不限</span>
    </div>
    <div class="keyword-area border-gray-bottom">
      <span>关键词/位置/民宿名</span>
    </div>
    <!-- 热门民宿建议 -->
    <div class="hot-suggests">
      <template v-for="(item, index) in hotSuggests" :key="index">
        <div
          class="tag"
          :style="{
            color: item.tagText.color,
            background: item.tagText.background.color,
          }"
          @click="skipClick(item)"
        >
          {{ item.tagText.text }}
        </div>
      </template>
    </div>
    <!-- 搜索按钮 -->
    <div class="search-btn" @click="searchClick">开始搜索</div>
  </div>
</template>

<script setup>
import { last } from "@antfu/utils";
import { ref } from "@vue/reactivity";
import { computed } from "@vue/runtime-core";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
import usecityStore from "../../../stores/modules/cityStore";
import usehomeStore from "../../../stores/modules/homeStore";
import useMainStore from "../../../stores/modules/mainStore";
import { formatMD, getDiffDay } from "../../../utils/format_date";
// 跳转城市定位页面
const router = useRouter();
const cityClick = () => {
  router.push("/city");
};
// 获取物理经纬度API
const positionClick = () => {
  navigator.geolocation.getCurrentPosition(
    (res) => {
      console.log("获取地址成功", res);
    },
    (err) => {
      console.log("获取地址失败", err);
      alert(err.message);
    },
    {
      enableHighAccuracy: true,
      timeout: 3000,
      maximumAge: 0,
    }
  );
};
// 回显选中的城市
const cityStore = usecityStore();
const { currentCity } = storeToRefs(cityStore);

// 日期
const mainStore = useMainStore();
const { nowDate, futureDate } = storeToRefs(mainStore);
// 通过computed修改 start、end Str内容 不使用ref
const startDate = computed(() => formatMD(nowDate.value));
const endDate = computed(() => formatMD(futureDate.value));
const countDay = ref(getDiffDay(nowDate.value, futureDate.value));
// 日期选择
let showCalendar = ref(false);

// 日期选择完成执行
const onConfirm = (value) => {
  showCalendar.value = false;
  // 保存新的值到mainStore
  mainStore.nowDate = value[0];
  mainStore.futureDate = value[1];
  countDay.value = getDiffDay(value[0], value[1]);
};
// 从homeStore获取 热门建议、分类
const homeStore = usehomeStore();
const { hotSuggests } = storeToRefs(homeStore);

// 热门建议跳转
const skipClick = (item) => {
  window.location.href = item.tagLink;
};
// 搜索页面跳转
const searchClick = () => {
  router.push({
    path: "/search",
    query: {
      startDate: startDate.value,
      endDate: endDate.value,
      currentCity: currentCity.value.cityName,
    },
  });
};
</script>

<style lang="less" scoped>
.search-box {
  padding: 10px;
}
.location {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  // border-bottom: 1px solid #ccc;
  .city {
    flex: 1;
    color: #333;
  }
  .position {
    display: flex;
    width: 75px;
    .text {
      position: relative;
      top: -1px;
      margin-right: 4px;
      color: #666;
    }
  }
}
.date-range {
  display: flex;
  justify-content: space-between;

  // border-bottom: 1px solid #ccc;
  .start,
  .end {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    margin-top: 6px;
    .tip {
      color: #aaaaaa;
    }
  }
  .stay {
    line-height: 44px;
  }
}
.desc-area {
  display: flex;
  justify-content: space-between;
  color: #aaaaaa;
  width: 100%;
  height: 44px;
  line-height: 44px;
}
.keyword-area {
  color: #aaaaaa;
  width: 100%;
  height: 44px;
  line-height: 44px;
}
.hot-suggests {
  display: flex;
  flex-wrap: wrap;
  .tag {
    padding: 4px 10px;
    border-radius: 15px;
    margin: 5px 2px;
    line-height: 1;
  }
}
.search-btn {
  box-sizing: inherit;
  width: 100%;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: 20px;
  font-weight: 500;
  font-size: 18px;
  color: #fff;
  background-image: linear-gradient(var(--color), #fcae3e);
}
</style>
